<template>
    <div class="container">
        <div class="content">
            <ol class="list-group list-group-numbered">
                <li v-for="item in list" :key="item.id" class="list-group-item">
                    {{item.title}}
                </li>
            </ol>
        </div>
        <div class="ctrol">
            <div class="row">
                <div :class="{ isActive: item.isActive }" class="col text-center px-0" v-for="item in datas" :key="item.id"
                    @click="handler(item.id)">
                    <img class="" :src="item.pgSrc" alt="">
                    <p>{{ item.label }}</p>
                </div>
            </div>
            <!-- <span class="mx-3" ></span> -->
        </div>
    </div>
</template>

<script setup>
import { nanoid } from "nanoid";
import { ref, watchEffect } from "vue";
import { getTopicsByParams } from './axios';
// import { watchEffect,ref, onMounted } from 'vue';
// import bg from '';

const datas = ref([{
    id:1,
    pgSrc: require('@/assets/imgs/buy.png'),
    label: '购物车',
    isActive: false,

}, {
    id:2,
    pgSrc: require('@/assets/imgs/star.png'),
    label: '收藏',
    isActive: false,

}, {
    id:3,
    pgSrc: require('@/assets/imgs/firstPage.png'),
    label: '首页',
    isActive: false,

}, {
    id:4,
    pgSrc: require('@/assets/imgs/set.png'),
    label: '设置',
    isActive: false,

}, {
    id:5,
    pgSrc: require('@/assets/imgs/my.png'),
    label: '我的',
    isActive: false,

}])

const list = ref([]);

const currentPage = ref(0);

const handler = id => {
    currentPage.value = id;
}

watchEffect(() => {
    datas.value.forEach(page => {
        if (page.id == currentPage.value) page.isActive = true;
        else page.isActive = false;
    });
    getTopicsByParams({ limit: 5, page: currentPage.value })
        .then(res => {
            list.value = res.data.data;
        })
})

</script>

<style lang="scss" scoped>
.content {
    width: 500px;
    height: 600px;
    margin: 0 auto;
    background-color: #F3F3F3;
    // border: 1px solid rgb(233, 229, 229);
}

.ctrol {
    width: 500px;
    // height: 600px;
    margin: 0 auto;
    background-color: #FFFFFF;
    // border: 1px solid rgb(233, 229, 229);
}

.isActive {
    background-color: green;
    color: #fff !important;
}
</style>